// 邮箱选项
import React, { Component } from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
} from 'react-native';

import { info_echangeStyle as styles } from '../../../../../styles';
import { RegisterSendEAction, RegisterSendE_YZAction } from '../../../../actions/systemAction'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { myAlert } from '../../../../util/compatible';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;          //获取屏幕宽度
var height = Dimensions.get('window').height;

class Echange_body extends Component {

    email = false;
    idcode = false;

    constructor(props) {
        super(props);
        this.state = ({
            //登录按钮是否可用
            isOk: false,
            //验证码是否可用
            isOkIdcode: false,
            //是否等待
            isloading: false
        });
    }

    goIdcode() {
        if (this.state.isOkIdcode) {
            this.setState({ isloading: true,isOkIdcode: false });
            this.props.actions.RegisterSendEAction({
                email: this.refs.email._lastNativeText
            });
        }
    }

    goYz() {
        if (this.state.isOk) {
            this.setState({ isloading: true, isOk: false });
            this.props.actions.RegisterSendE_YZAction({
                email: this.refs.email._lastNativeText,
                idcode: this.refs.idcode._lastNativeText
            });
        }
    }

    isOKN(val) {
        if (val.length > 2) {
            this.email = true;
        } else {
            this.email = false;
        }
        this.isOkIdcode();
    }

    isOkIdcode() {
        if (this.email) {
            this.setState({ isOkIdcode: true });
        } else {
            this.setState({ isOkIdcode: false });
        }
    }

    isOk() {
        if (this.idcode) {
            this.setState({ isOk: true });
        } else {
            this.setState({ isOk: false });
        }
    }

    isOKP(val) {
        if (val.length > 2) {
            this.idcode = true;
        } else {
            this.idcode = false;
        }
        this.isOk();
    }

    componentWillReceiveProps(nextProps) {
        const { data } = nextProps.msg
        if (data.msg != "") {
            //登录成功
            if (data.msg == "ok") {
                this.props.navigation.goBack();
            } else {
                //失败弹出消息
                myAlert(data.msg);
            }
            this.setState({ isOk: false, isOkIdcode: false, isloading: false })
        }
    }

    render() {
        return (


            <View style={styles.repcenter}>

                <Text style={styles.reptext}>当前邮箱:</Text>

                <TextInput
                    style={[styles.repinput, { width: width * 0.9 }]}
                    underlineColorAndroid="transparent"
                    ref="email"
                    placeholder="请输入邮箱"
                    onChangeText={this.isOKN.bind(this)}
                />

                <View style={styles.reph}>
                    <TextInput
                        style={[styles.repinput, { width: width * 0.6 }]}
                        underlineColorAndroid="transparent"
                        ref="idcode"
                        placeholder="请输入邮箱验证码"
                        onChangeText={this.isOKP.bind(this)}
                    />

                    <TouchableOpacity
                        activeOpacity={1}
                        style={
                            this.state.isOkIdcode ?
                                [styles.repbout]
                                :
                                [styles.repbout,
                                {
                                    backgroundColor: "#aeaeae"
                                }]
                        }
                        underlayColor={this.state.isOkIdcode ? "#3D9CCC" : "#aeaeae"}
                        onPress={this.goIdcode.bind(this)}>
                        <Text style={[styles.repbutton, { width: width * 0.28 }]}>
                            {this.state.isloading ? "等  待" : "发送验证码"}
                        </Text>
                    </TouchableOpacity>

                </View>

                <TouchableOpacity
                    activeOpacity={1}
                    style={
                        this.state.isOk ?
                            [styles.repbout2, {
                                elevation: 3,
                                shadowColor: 'black',
                                shadowOpacity: 1,
                                shadowRadius: 5
                            }]
                            :
                            [styles.repbout2, {
                                backgroundColor: "#aeaeae",
                                elevation: 3,
                                shadowColor: 'black',
                                shadowOpacity: 1,
                                shadowRadius: 5
                            }]
                    }

                    underlayColor={this.state.isOk ? "#3D9CCC" : "#aeaeae"}
                    onPress={this.goYz.bind(this)}>
                    <Text style={[styles.repbutton, { width: width * 0.9 }]}>
                        {this.state.isloading ? "等  待" : "完    成"}
                    </Text>
                </TouchableOpacity>

                {/* <TouchableOpacity style={[styles.repbout3, {
                    elevation: 3,
                    shadowColor: 'black',
                    shadowOpacity: 1,
                    shadowRadius: 5
                }]} activeOpacity={1}
                    onPress={() => { this.props.navigation.navigate('Revise_email') }}>
                    <Text style={[styles.repbutton, { width: width * 0.9 }]}>修改邮箱</Text>
                </TouchableOpacity> */}
            </View >

        )
    }
}

//组合action
var actions = {
    RegisterSendEAction,
    RegisterSendE_YZAction
}
//连接state到props
const mapStateToProps = state => {
    return {
        msg: state.RegisterSendEReducer
    }
}
//连接action
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(actions, dispatch)
    }
}
//导出组合好的组件(组合后状态改变重新渲染组合组件的页面)
export default connect(
    mapStateToProps, mapDispatchToProps
)(Echange_body);